<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,mail=yes">
   <title>Index</title>

   <script src="./js/jquery-1.8.3.min.js"></script>
   <script src="./js/swiper.min.js"></script>
   <link rel="stylesheet" href="./layui/css/layui.css">
   <link rel="stylesheet" href="./css/iconfont.css">
   <link rel="stylesheet" href="./css/animate.css">
   <link rel="stylesheet" href="./css/swiper.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/index.css">
   <script src="./js/wow.min.js"></script>
   <script type="text/javascript" src="./js/clipboard.min.js"></script>
   <script type="text/javascript" src="./layui/layui.js"></script>
</head>

<body>
   <header class="headerpage " data-load="header"></header>
   <main class="user_page  ">
      <section class="">
         <div class="layui-main">
            <div class="user_con">
               <div class="user_headpage" data-load="user_active_header"></div>
               <div class="right_main ">

                  <p class="ft24 mb10 ft-bold">嘉賓介紹</p>
                  <p class="ft14 gary_c9 mb20 ft-bold">快來介紹你的嘉賓有多厲害！</p>
                  <div class="block_com" style="min-height: 80vh;">
                     <p class="gary_c9 mb30">拖曳嘉賓可以改變排序</p>
                     <div class="active_w1 active3 " style="margin:  0 auto;">
                        <from class="layui-form">
                           <ul id="advanced-1" class="layui-row layui-col-space60 ul_height a8_ul1">
                              <li class="layui-col-md3 layui-col-xs4">
                                 <div class="item">
                                    <div class=" img img_box">
                                       <img class="layui-circle" src="images/userp.png">
                                    </div>
                                    <p>JIANGHAN</p>
                                 </div>
                              </li>
                              <li class="layui-col-md3 layui-col-xs4">
                                 <div class="item" data-btn="add">
                                    <div class=" img img_box">
                                       <img class="layui-circle" src="images/add.jpg">
                                    </div>
                                    <p>新增嘉賓</p>
                                 </div>
                              </li>
                           </ul>
                           <div class="mt40 d-flex jc-s al-c">


                              <button class="layui-btn layui-btn-lg w100 layui-bg-orange next-btn">储存</button>

                           </div>
                        </from>


                     </div>
                  </div>
               </div>
            </div>
      </section>
   </main>
   <div class="layui-hide">
      <div class="addhtml ">
         <div class="active_w active8 ">
            <from class="layui-form">
               <div class=" flex-center mb60">
                  <div class="user_upload">
                     <div class="user_img">
                        <img src="images/userp.png" id="upload-img">
                     </div>
                     <div id="upload-btn" class="btn">
                        <img class="layui-circle" src="images/upload.png">
                     </div>
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label must">嘉賓姓名</div>
                  <div class="">
                     <input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓姓名" autocomplete="off"
                        class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label must">職稱
                  </div>
                  <div class="">
                     <input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓職稱" autocomplete="off"
                        class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label must">公司名稱
                  </div>
                  <div class="">
                     <input type="text" name="username" lay-verify="required" placeholder="请填写嘉賓公司名稱" autocomplete="off"
                        class="layui-input">
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label ">嘉賓簡介
                  </div>
                  <div class="">
                     <textarea lay-verify="required" class="layui-textarea"
                        style="min-height: 3rem;">请填写嘉賓嘉簡介</textarea>
                  </div>
               </div>
               <div class="layui-form-item">
                  <div class="label ">嘉賓網址<p class=" tip1">可以加上嘉賓的 Facebook、Instagram、Twitter 等</p>
                  </div>
                  <div class="">
                     <input type="text" name="username" lay-verify="" placeholder="请填写嘉賓網址" autocomplete="off"
                        class="layui-input">
                  </div>
               </div>
               <div class="mt40 d-flex jc-c al-c">
                  <button class="layui-btn layui-bg-orange next-btn">新增嘉宾</button>
               </div>
            </from>
         </div>
         <div class="flex-column-center">

         </div>

      </div>
   </div>
</body>
<script src="./js/index.js"></script>
<script src="js/Sortable.js"></script>
<script src="st/app.js"></script>
<script>

   var addhtml = $('.addhtml')[0].outerHTML;
   $(document).on('click', '[data-btn="add"]', function () {

      layui.use(function () {
         var upload = layui.upload;
         var layer = layui.layer;
         var element = layui.element;
         var $ = layui.$;

         layer.open({
            type: 1, // page 层类型
            area: ['700px', '80%'],
            title: false,
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            anim: 0, // 0-6 的动画形式，-1 不开启
            content: addhtml
         });
         upload.render({
            elem: '#upload-btn',
            url: '', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
               // 预读本地文件示例，不支持ie8
               obj.preview(function (index, file, result) {
                  $(document).find('#upload-img').attr('src', result); // 图片链接（base64）
               });
            }

         })
         element.init();
      })

   })
</script>


</html>